<script setup lang="ts">
import {onMounted, ref} from 'vue';
import tinymce from 'tinymce/tinymce'; //tinymce核心文件
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/models/dom'; // 引入dom模块。从 Tinymce6，开始必须有此模块导入
import 'tinymce/skins/ui/oxide/skin.css'//样式
import 'tinymce/themes/silver'; //默认主题
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
// import 'tinymce/langs/zh-Hans'; //引入编辑器语言包
import 'tinymce/models/dom'; // 引入dom模块。从 Tinymce6，开始必须有此模块导入
import 'tinymce/themes/silver'; //默认主题
import 'tinymce/icons/default'; //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/plugins/advlist'; //高级列表
import 'tinymce/plugins/anchor'; //锚点
import 'tinymce/plugins/autolink'; //自动链接
import 'tinymce/plugins/autoresize'; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import 'tinymce/plugins/autosave'; //自动存稿
import 'tinymce/plugins/charmap'; //特殊字符
import 'tinymce/plugins/code'; //编辑源码
import 'tinymce/plugins/codesample'; //代码示例
import 'tinymce/plugins/directionality'; //文字方向
import 'tinymce/plugins/emoticons'; //表情
import 'tinymce/plugins/fullscreen'; //全屏
import 'tinymce/plugins/help'; //帮助
import 'tinymce/plugins/image'; //插入编辑图片
import 'tinymce/plugins/importcss'; //引入css
import 'tinymce/plugins/insertdatetime'; //插入日期时间
import 'tinymce/plugins/link'; //超链接
import 'tinymce/plugins/lists'; //列表插件
import 'tinymce/plugins/media'; //插入编辑媒体
import 'tinymce/plugins/nonbreaking'; //插入不间断空格
import 'tinymce/plugins/pagebreak'; //插入分页符
import 'tinymce/plugins/preview'; //预览
import 'tinymce/plugins/quickbars'; //快速工具栏
import 'tinymce/plugins/save'; //保存
import 'tinymce/plugins/searchreplace'; //查找替换
import 'tinymce/plugins/table'; //表格
import 'tinymce/plugins/template'; //内容模板
import 'tinymce/plugins/visualblocks'; //显示元素范围
import 'tinymce/plugins/visualchars'; //显示不可见字符
import 'tinymce/plugins/wordcount';
import type {Category} from "@/net/controller/category-controller.ts";
import {getAllCategory} from "@/net/controller/category-controller.ts";
import type {PostEditDTO} from "@/net/controller/post-controller.ts";
import {getPostDetails, publishPost} from "@/net/controller/post-controller.ts";
import router from "@/router";
import {getQueryString} from "@/utils/url-utils.ts";
const init={
  selector: '#tinydemo',
  language:'zh-Hans',
  promotion:false, //Upgrade是否开启
  branding: false, //tiny技术支持信息是否显示
  plugins: `codesample preview searchreplace autolink directionality
  visualblocks visualchars image link media template table
  charmap pagebreak nonbreaking anchor insertdatetime advlist
  lists wordcount autosave`, //引入工具插件
  toolbar: `preview codesample code forecolor backcolor styles directionality fontfamily fontsize searchreplace image  media link alignleft aligncenter alignright template table charmap pagebreak nonbreaking anchor
  insertdatetime advlist lists wordcount autosave `, //工具栏显示
  line_height_formats: '1 1.2 1.4 1.6 2', //行高
  font_size_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
  font_family_formats:'微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
}
tinymce.init({})

const mode = ref("new")
const postId = getQueryString("postId")
mode.value = getQueryString("mode")

if (!mode.value) {
  mode.value = "new"
} else {
  mode.value = "edit"
  if (!postId) {
    ElMessage.error("帖子ID无效")
  }
}

const formData = ref<PostEditDTO>({
  postId: 0,
  title: "",
  content: "",
  category: 1
})

onMounted(async () => {
  if (mode.value == "edit") {
    const res = await getPostDetails(Number.parseInt(postId))
    formData.value = {
      postId: res.postId,
      title: res.title,
      content: res.content,
      category: res.categoryId
    }
  }
})


const cats = ref<Category[]>([])

async function refreshCats() {
  cats.value = await getAllCategory()
}

refreshCats()

function submit() {
  publishPost(formData.value).then(() => {
    ElMessage.success("发布成功")

    setTimeout(() => {
      router.push("/manager/posts")
    }, 1000)
  })
}
</script>

<template>
  <main>
    <p>标题</p>
    <el-input size="default" v-model="formData.title" />

    <p>分类</p>
    <el-select
        v-model="formData.category"
        size="large"
        style="width: 240px"
    >
      <el-option
          v-for="item in cats"
          :label="item.name"
          :value="item.categoryId"
      />
    </el-select>

    <p>正文</p>

    <Editor id="tinydemo" v-model="formData.content" :init='init' />

    <div class="flex flex-horizontal" style="margin-top: 1rem">
      <el-button size="default" type="primary" @click="submit()">提交</el-button>
    </div>
  </main>
</template>

<style scoped>

</style>